<template>
  <div>
    <el-card>
      <!-- 官方榜区域 -->
      <div v-loading="guanfangList.length !== 4"></div>
      <div class="guanfang-list">
        <h2 class="font-bold font-20">官方榜</h2>
        <div
          class="guanfang-item mtop-10"
          v-for="(item, listIndex) in guanfangList"
          :key="item.id"
        >
          <div class="guanfang">
            <div class="img-wrap">
              <img
                class="img-h img-radius-4 pointer"
                :src="item.coverImgUrl"
                @click="toPlayListDetail(item.id)"
              />
              <div class="play-btn pointer" @click="toPlayListDetail(item.id)">
                <i class="iconfont icon-bofang"></i>
              </div>
            </div>
            <ul class="mleft-30">
              <li
                v-for="(music, index) in item.tracks"
                :key="music.id"
                @dblclick="playMusic(music.id, listIndex, index)"
              >
                <span class="mleft-10 text-hidden">{{ index + 1 }}</span>
                <span class="mleft-10 text-hidden geming">{{
                  music.name
                }}</span>
                <span class="zuozhe mright-10 text-hidden">{{
                  music.ar[0].name
                }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 全球榜 -->
      <div class="global-list" >
            <h2 class="font-bold font-20">全球榜</h2>
            <ImgList
                @clickImg="toPlayListDetail" :list="globalList" type="playlist"
            >
            <template v-slot="{item}">
                <div class="text-hidden">
                    {{item.name}}
                </div>
            </template>

            </ImgList>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getTopList, getPlayListDetail } from "@/api/request";
import ImgList from "@/components/list/ImgList.vue";
export default {
  components: { ImgList },
  data() {
    return {
      guanfangListId: [],
      guanfangList: [],
      globalList: [],
    };
  },
  created() {
    this.getTopList();
  },
  methods: {
    // 获取排行榜
    async getTopList() {
      if (this.guanfangList.length !== 0) return;
      const { data: res } = await getTopList();
      console.log(res);
      if (res.code !== 200) return;
      // 清空官方榜数据
      this.guanfangListId = [];
      res.list.slice(0, 4).forEach((item) => {
        this.guanfangListId.push(item.id);
      });
      this.globalList = Object.freeze(res.list.slice(4));
      this.guanfangListId.forEach((item) => {
        this.getPlayList(item);
      });
      console.log(this.globalList);
    },
    async getPlayList(id) {
      const { data: res } = await getPlayListDetail(id);
      if (res.code !== 200) return;
      res.playlist.tracks = Object.freeze(res.playlist.tracks.slice(0, 5));
      this.guanfangList.push(Object.freeze(res.playlist));
    },
    toPlayListDetail(id) {
      if (typeof id === "number") {
        this.$router.push({ path: "/playlistdetail/" + id });
      }
    },
    playMusic(id , listIndex , index) {
        this.$store.commit('setMusicList',this.guanfangList[listIndex].tracks);
        this.$store.commit('setCurrenMusicId',id);
        this.$store.commit('setPlayState',true);
        this.$store.commit('setCurrenIndex',index)
    },
  },
};
</script>

<style lang="less" scoped>
.guanfang-item {
  margin-bottom: 10px;
}
.guanfang {
  display: flex;
  height: 160px;
  .img-wrap {
    position: relative;
    height: 160px;
    width: 160px;
    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fbf6f7;
      color: #ec4141;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50%;
      opacity: 0;
      transition: all 0.8s;
      i {
        font-size: 18px;
      }
    }
    &:hover .play-btn {
      opacity: 1;
    }
  }
  ul {
    flex-grow: 1;
    li {
      height: 32px;
      line-height: 32px;
      color: red;
      background-color: #fff;
      &:nth-child(1) {
        background-color: #f9f9f9;
      }
      &:nth-child(3) {
        background-color: #efefef;
      }
      &:nth-child(4) {
        color: #666;
      }
      &:nth-child(5) {
        color: #666;
        background-color: #f9f9f9;
      }
      &:hover {
        background-color: #f4f4f4;
      }
      span {
        display: inline-block;
      }
      .geming {
        color: #373737;
      }
      .zuozhe {
        float: right;
        color: #9b9b9b;
      }
    }
  }
}
</style>